<template>
  <div class="btns">
    <div>
      <el-button type="primary" @click="handleAdd" plain>新建账号</el-button>
      <el-button @click="handleDelMultipleAccount" plain>批量删除</el-button>
    </div>
    <div>
      <el-input v-model="pageInfo.keyword" placeholder="请输入账号、姓名、昵称" maxlength="20" clearable @clear="handleClear"
        @keyup="handleKeyUp">
        <template #append>
          <el-button icon="search" @click="handleSearch" />
        </template>
      </el-input>
    </div>
  </div>
  <el-table :data="account.list" border style="width: 100%" @selection-change="handleSelectionChange"
    v-loading="loading">
    <el-table-column type="selection" width="40" />
    <el-table-column prop="account" label="账号" />
    <el-table-column prop="name" label="姓名" width="100" />
    <el-table-column prop="nickname" label="昵称" />
    <el-table-column prop="sex" label="性别" width="60" />
    <el-table-column prop="birthday" label="出生日期" width="110" />
    <el-table-column prop="power" label="权限" width="100" />
    <el-table-column prop="creatTime" label="创建时间" width="170" />
    <el-table-column prop="remark" label="备注" show-overflow-tooltip />
    <el-table-column label="操作" width="140">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-popconfirm title="您确定要删除这一项吗？" @confirm="handleDelete(scope.row)">
          <template #reference>
            <el-button size="small" type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <Page class="page" :total="total" :pageInfo="pageInfo" @pageSizeChange="pageSizeChange"
    @pageNoChange="pageNoChange" />
</template>
<script lang="ts" setup>
import { accountList, delAccount, delMultipleAccount } from '@/api/api'
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import Page from '@/components/page.vue'

// 定义数据
let account = reactive({
  list: []
})

let pageInfo = reactive({
  pageNo: 1,
  pageSize: 10,
  keyword: ''
})

let total = ref(0)

let selectedAccount = ref([])

let loading = ref(false)

// 获取列表数据
const getAccountList = () => {
  loading.value = true
  accountList(pageInfo).then((res: any) => {
    account.list = res.result.list
    total.value = res.result.total
  }).finally(() => {
    loading.value = false
  })
}

// 模糊搜索
const handleSearch = () => {
  pageInfo.pageNo = 1
  getAccountList()
}

// 回车搜索
const handleKeyUp = (e: any) => {
  if (e.keyCode === 13) {
    handleSearch()
  }
}

// 清空搜索条件
const handleClear = () => {
  pageInfo.pageNo = 1
  getAccountList()
}

let pageSizeChange = (val: number) => {
  pageInfo.pageNo = 1
  pageInfo.pageSize = val
  getAccountList()
}

let pageNoChange = (val: number) => {
  pageInfo.pageNo = val
  getAccountList()
}

// 新增账号跳转
let router = useRouter()
const handleAdd = () => {
  router.push({
    name: 'accountEdit'
  })
}

// 编辑账号
const handleEdit = (rowInfo: any) => {
  router.push({
    name: 'accountEdit',
    params: {
      id: rowInfo._id
    }
  })
}

// 删除账号
const handleDelete = (rowInfo: any) => {
  delAccount(rowInfo._id).then((res: any) => {
    if (res.code === 200) {
      ElMessage.success('删除成功')
      getAccountList()
    }
  })
}

// 行勾选
const handleSelectionChange = (val: any) => {
  selectedAccount.value = val
}

// 批量删除
const handleDelMultipleAccount = () => {
  if (selectedAccount.value.length === 0) {
    ElMessage.error('请至少选择一项')
  } else {
    let ids = selectedAccount.value.map((item: any) => {
      return item._id
    })
    delMultipleAccount({ ids }).then((res: any) => {
      if (res.code === 200) {
        ElMessage.success('删除成功')
        getAccountList()
      }
    })
  }
}

onMounted(() => {
  getAccountList()
})
</script>  
<style lang="scss" scoped>
.btns {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
}

.page {
  margin-top: 15px;
}
</style>              